<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始React</title>
</head>
<body>
  <div id="root"></div>
</body>
<!-- 引入react核心库 -->
<script src="./js/react.development.js"></script>
<!-- 引入react-dom库 -->
<script src="./js/react-dom.development.js"></script>

<script>
  // 创建按钮
  // createElement方法，用于创建React元素
  // 该方法通常需要设置3个参数：标签名称、配置对象、元素内容
  const btn = React.createElement("button",{
    // 注意：React元素的事件名称要采用小驼峰命名
    onClick:function (e) {
        // 阻止事件冒泡
        e.stopPropagation();
      alert('按钮被点击了...')
    }
  },'我是按钮');

  // 创建div
  const div = React.createElement('div',{
      onClick:function () {
          alert('div被点击了...')
      }
    // 第三个参数往后都是该标签的内容
  },btn,"我是div",btn)

  // 创建React容器
  const root = ReactDOM.createRoot(document.querySelector("#root"));

  // 在React容器中渲染div
  root.render(div)

</script>

</html>
